<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的冒泡</title>
    <style>

        *{
            margin:0;
            padding: 0;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            outline: 2px red solid;
            border: 2px yellow dashed;
            box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.6);
            position: absolute;
        }

        .box2 {
            width: 500px;
            height: 500px;
            background-color: orange;
        }

        .box3{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color:skyblue ;
            position: absolute;
            bottom: 0;
        }
    </style>
    <script>

        /* 
            事件的冒泡和元素的样式无关，只和元素的结构相关。

        */
        //使box1能够跟随鼠标移动
        document.addEventListener("DOMContentLoaded", function () {
            const box1 = document.querySelectorAll(".box1")[0]
            const box2 = document.querySelectorAll(".box2")[0]
            const box3 = document.querySelectorAll(".box3")[0]
            const box4 = box3.firstElementChild

            document.addEventListener("mousemove", function (event) {
                box1.style.left = event.clientX + "px";
                box1.style.top = event.clientY  + "px";

            });
            box2.addEventListener("mousemove", event => {
                event.stopPropagation();
            });

            box3.addEventListener("click",event=>{
                alert("box3的单击响应函数")
            })

            box4.addEventListener("click",event=>{
                alert("box4的单击响应函数")
                
            })
        });
    </script>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>
</body>

</html>